<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="renderer" content="webkit">
    <meta name="viewport" content="user-scalable=no,width=device-width,initial-scale=1">
    <title>订单确认</title>
    <meta name ="keywords" content="港珠澳头等舱">
    <meta name="description" content="港珠澳头等舱">
    <link rel="stylesheet" href="https://at.alicdn.com/t/font_234130_nem7eskcrkpdgqfr.css">
    <link rel="stylesheet" type="text/css" href="../css/public.css">
    <link rel="stylesheet" type="text/css" href="../css/confirm.css">
    <script type="text/javascript" src="../js/jquery-1.12.1.min.js"></script>
    <script type="text/javascript" src="../js/fit.js"></script>
    <script type="text/javascript" src="../js/moment.min.js"></script>
  </head>

  <body>

    <div class="container confirm-container">

        <div class="order-card">
            <div class="card-box">
                <p>3月15日 8:00 发车</p>
                <ul>
                    <li>
                        <em>1</em>
                        <p>珠海北站 - 珠海口岸  3座</p>
                        <span>前排×1、后排×2</span>
                    </li>
                    <li>
                        <em>2</em>
                        <p>珠海口岸 - 香港机场  3座</p>
                        <span>后排×3</span>
                    </li>
                </ul>
            </div>
        </div>

        <div class="order-info">
            <!-- <ul class="info-list">
                <li class="activity">
                    <span>优惠活动</span>
                    <div>
                        <p>“拼车3免1”大优惠！</p>
                    </div>
                </li>
                <li class="price">
                    <span>票价合计</span>
                    <div>
                        <p>¥ 692 <em>¥ 1028</em></p>
                    </div>
                </li>
            </ul> -->
            <ul class="info-list">
                <li>
                    <span>联系人</span>
                    <div>
                        <input type="text" class="ipt" name="people" placeholder="请输入联系人姓名" />
                    </div>
                </li>
                <li>
                    <span>联系电话</span>
                    <div>
                        <input type="text" class="ipt" name="phone" placeholder="请输入联系电话" />
                    </div>
                </li>
            </ul>
        </div>

        <div class="order-bottom">
            <div class="sub">
                <!-- <button class="btn" id="noticeBtn">退改票须知</button> -->
                <p>
                    应付
                    <span>1028</span>
                    <em>元</em>
                </p>
            </div>
            <button class="btn big-btn main-btn" id="booking">立即预订</button>
        </div>
    </div>

    <!-- 退改签须知 -->
    <div class="uppage notice-uppage" id="uppage_notice">
        <div class="uppage-bg close"></div>
        <div class="uppage-box">
            <div class="uppage-head">
                <span>退改票须知</span>
                <em class="close">X</em>
            </div>
            <div class="uppage-body notice-container">
                <h5>退票</h5>
                <p>退票说明退票说明退票说明，退票说明退票说明退票说明退票说明。退票说明退票说明，退票说明退票说明退票说明退票说明退票说明，退票说明退票说明退票说明退票说明退票说明。</p>
                <h5>改票</h5>
                <p>改票说明改票说明改票说明改票说明，改票说明改票说明改票说明改票说明，改票说明改票说明。改票说明改票说明改票说明改票说明，改票说明改票说明改票说明。改票说明改票说明改票说明，改票说明改票说明改票说明。</p>
            </div>
        </div>
    </div>


    <script type="text/javascript" src="../js/index.js"></script>
    <script type="text/javascript">
        var confirm = {
          notice: "#uppage_notice",

          // 打开须知
          noticeShow: function(){
              $(this.notice).show();
          },

          // 关闭须知
          noticeHide: function(){
              var _this = this;
              $(this.notice).addClass("hide");
              $("#noticeBtn").removeClass("active");
              setTimeout(function(){
                  $(_this.notice).removeClass("hide").hide();
              },500);
          },

          // 预订
          booking: function(){
            var people = $("[name=people]").val();
            var phone = $("[name=phone]").val();
            if(people == ""){
              tip.show("请输入联系人姓名");
              return
            }
            if(phone == ""){
              tip.show("请输入联系电话");
              return
            }
            //todo 调用微信支付

            //成功则跳转至结果页
            $(location).attr('href', "poolingSuccess.html");
          },

          // 初始化
          init: function() {
              var _this = this;

              // 须知绑定点击事件
              $("#noticeBtn").bind("click",function(){
                var $this = $(this);
                if($this.hasClass("active")){
                    _this.noticeHide();
                    $this.removeClass("active");
                }else {
                  _this.noticeShow();
                  $this.addClass("active");
                }
              });

              // 关闭须知窗口
              $(this.notice).find(".close").bind("click",function(){
                  _this.noticeHide();
              });

              // 预订按钮绑定
              $("#booking").bind("click",function(){
                _this.booking();
              })
          }
        }

        confirm.init();
    </script>

  </body>
</html>
